<template>
	<view class="above">
		<view class="body">
			<view class="particulars" v-for="(item, index) in fareList" :key="index">
				<view class="times">
					<view class="">{{ item.startDate }}</view>
					<view class="">{{ item.week }}</view>
					<view class="">{{ item.startTime }} 发车</view>
				</view>
				<view class="station">
					<view class="">{{ item.stationName }}</view>
					<view class=" arrows"><image src="../../static/img/arrows.png" mode=""></image></view>
					<view class="">{{ item.targetName }}</view>
				</view>
				<view class="classes">
					<view class="">里程:{{ item.miles }}km</view>
					<view class="">班次:{{ item.busnum }}</view>
				</view>
				<view class="passenger" v-for="(obj, index) in passengerList" :key="index">
					<view class="box">
						<view class="caption">汽车票</view>
						<view class="content">￥{{ item.price }} x {{ item.ticketAmount }}人</view>
					</view>
					<view class="box">
						<view class="caption">乘车人</view>
						<view class="content">{{ obj.name }}</view>
					</view>
					<view class="box">
						<view class="caption">手机号</view>
						<view class="content">{{ obj.phone }}</view>
					</view>
					<view class="box">
						<view class="caption">订单号</view>
						<view class="content">{{ item.orderCode }}</view>
					</view>
				</view>
				<view class="refund">
					<view class="sum">退款金额</view>
					<view class="money">￥66</view>
				</view>
			</view>
			<view class="cause">
				<view class="title">退款原因</view>
				<view class="causeBox">
					<view v-for="(item, index) in causeList" :key="index" :class="['option', { optionTest: selected === index }]" @click="getCause(item.title, index)">
						{{ item.title }}
					</view>
				</view>
				<textarea v-model="content" @blur="getOther" class="other" placeholder-style="font-size:13px;color:#999999;" value="" placeholder="其它原因:选填" />
			</view>
		</view>
		<view class="apply" @click="application">申请退款</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			fareList: [],
			causeList: [],
			passengerList: [],
			globalCode: '',
			orderCode: '',
			content: '',
			title: '',
			cause: '',
			selected: ''
		};
	},
	onLoad() {
		this.getRefund();
		var cause = [
			{ title: '行程有变' },
			{ title: '买错日期' },
			{ title: '班次停运' },
			{ title: '取不出票' },
			{ title: '别处购票' },
			{ title: '买错站点' },
			{ title: '填错信息' },
			{ title: '赶不上车' }
		];
		this.causeList = cause;
	},
	onShow() {},
	methods: {
		getCause(title, i) {
			this.title = title;
			this.selected = i;
		},
		getRefund() {
			const that = this;
			uni.getStorage({
				key: 'reimburse',
				success: res => {
					this.fareList.push(res.data.orderInfo);
					this.passengerList = res.data.ticketInfos;
					that.globalCode = res.data.orderInfo.globalCode;
					that.orderCode = res.data.orderInfo.orderCode;
					let data = {
						globalCode: that.globalCode,
						orderCode: that.orderCode,
						ticks: utils.utils.GetTicks(),
						channel: this.$tokenObj.obj.channel
					};
					data.sign = utils.utils.GetSign(data);
					this.$http
						.request({
							url: '/Order/BusTicketQueryRefund',
							method: 'get',
							data: data
						})
						.then(data => {});
				}
			});
		},
		application() {
			const that = this;
			this.cause = this.title + '' + this.content;
			let data = {
				globalCode: that.globalCode,
				orderCode: that.orderCode,
				ticks: utils.utils.GetTicks(),
				refundReason: this.cause,
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Order/BusTicketRefund',
					method: 'POST',
					data: data
				})
				.then(data => {
					if (data.data.isSuccess == false) {
						uni.showModal({
							title: '提示',
							content: data.data.errorMessage,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
								}
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '退款成功',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '../order/order'
									});
								}
							}
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		getOther() {}
	}
};
</script>

<style scoped>
.above {
	width: 100%;
	height: 100%;
	background: linear-gradient(#00a0e9, #ffffff);
}
.body {
	width: 94%;
	margin: auto;
}
.particulars {
	padding: 15upx 0upx;
	border-radius: 10upx;
	background-color: #ffffff;
}
.times {
	display: flex;
}
.times view {
	font-size: 33upx;
	font-weight: bold;
	margin-left: 35upx;
}
.station {
	display: flex;
	margin-top: 25upx;
}
.station view {
	font-weight: 600;
	font-size: 38upx;
	margin-left: 35upx;
}
.arrows {
	width: 80upx;
	height: 15upx;
	margin-top: -6upx;
}
.arrows image {
	width: 100%;
	height: 100%;
}
.classes {
	color: #999999;
	display: flex;
	font-size: 25upx;
	margin-top: 20upx;
}
.classes view {
	margin-left: 35upx;
}
.passenger {
	width: 93%;
	margin: auto;
	margin-top: 20upx;
	padding: 15upx 0;
	border-top: 1px dashed #e6e6e6;
	border-bottom: 1px dashed #e6e6e6;
}
.box {
	display: flex;
	margin-top: 10upx;
	justify-content: space-between;
}
.caption {
	color: #999999;
	font-size: 25upx;
}
.content {
	font-size: 28upx;
}
.refund {
	width: 93%;
	margin: auto;
	display: flex;
	margin-top: 10upx;
	justify-content: space-between;
}
.sum {
	color: #999999;
	font-size: 30upx;
}
.money {
	color: #ff4500;
	font-size: 30upx;
}

.apply {
	width: 100%;
	bottom: 0;
	height: 80upx;
	color: #ffffff;
	position: fixed;
	font-size: 35upx;
	text-align: center;
	line-height: 80upx;
	background-color: #01a1ea;
}
/* 退款原因 */
.cause {
	padding: 15upx;
	margin-top: 25upx;
	border-radius: 10upx;
	margin-bottom: 100rpx;
	background-color: #ffffff;
}
.title {
	font-size: 30upx;
	padding-bottom: 10upx;
	border-bottom: 1px solid #e5e5e5;
}
.option {
	/* width: 150upx; */
	width: 23%;
	height: 60upx;
	color: #808080;
	font-size: 23upx;
	margin-top: 18upx;
	line-height: 60upx;
	margin-left: 10upx;
	text-align: center;
	border-radius: 10upx;
	display: inline-block;
	border: 1upx solid #e5e5e5;
}
.option view {
	color: #808080;
	font-size: 23upx;
	margin-left: 29upx;
	border-radius: 10upx;
	padding: 15upx 30upx;
	border: 1upx solid #e5e5e5;
}
.optionTest {
	color: #01a1e9;
	border: 1px solid #01a1e9;
}
.other {
	width: 97%;
	height: 200upx;
	padding: 10upx;
	margin-top: 15upx;
	background-color: #f1f1f1;
}
</style>
